<template>
  <div class="integrated_module">
    <el-card>
      <el-row>
        <el-col :span="5" style="border-radius: 10px">
          <el-row @mouseover="hover(1)" @click="click(1)"
                  :class="{tipWord:current===1, unchosen: current!==1}"
          >活品采购
          </el-row>
          <el-row @mouseover="hover(2)" @click="click(2)"
                  :class="{tipWord:current===2, unchosen: current!==2}">登记出售
          </el-row>
          <el-row @mouseover="hover(3)" @click="click(3)"
                  :class="{tipWord:current===3, unchosen: current!==3}">电商指南
          </el-row>
          <el-row @mouseover="hover(4)" @click="click(4)"
                  :class="{tipWord:current===4, unchosen: current!==4}">养殖端指南
          </el-row>
        </el-col>
        <el-col :span="19" v-if="current===1">
          <el-row style="margin-bottom: 10px">
            <el-col :span="15">
              <el-input v-model="inquireWord" placeholder="请输入查询内容/关键字"></el-input>
            </el-col>
            <el-col :span="8" :offset="1">
              <el-button @click="normalInquire">查询</el-button>
              <el-button>高级检索</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-row style="width: 100%">
              <el-col :span="12">
                <Fresh :title="popularFresh.title" :words="popularFresh.words"
                       :bottom="popularFresh.bottom"></Fresh>
              </el-col>
              <el-col :span="12">
                <Fresh :title="popularFisheries.title" :words="popularFisheries.words"
                       :bottom="popularFisheries.bottom"></Fresh>
              </el-col>
            </el-row>
          </el-row>
        </el-col>
        <el-col :span="18" v-else-if="current===2">
          登记出售
        </el-col>
        <el-col :span="18" v-else-if="current===3">
          电商指南
        </el-col>
        <el-col :span="18" v-else>
          养殖端指南
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import Fresh from "@/components/Home/Fresh.vue";

export default {
  name: "IntegratedModule",
  components: {Fresh},
  data() {
    return {
      current: 1,
      locked: false,
      timer: null,
      inquireWord: "",
      popularFresh: {
        title: "热门品种",
        words: [["鲜活基围虾", "鲜活鲈鱼", "鲜活鲫鱼", "鲜活罗非鱼"], ["鲜活鳜鱼", "鲜活黄鳝", "鲜活河鳗"]],
        bottom: ["大运单量", "中运单量", "小运单量", "……"]
      },
      popularFisheries: {
        title: "热门养殖场",
        words: [["浦东", "嘉定", "宝山", "青浦", "松江", "闵行", "奉贤", "南通"], ["启东", "嘉兴", "苏州", "太仓", "吴江", "杭州", "南京", "绍兴", "宁波"]],
        bottom: ["＜30min车程", "1-2h车程", "3-5h车程", "＞6h车程"]
      }
    };
  },
  methods: {
    hover(number) {
      if (!this.locked) {
        this.current = number;
      }
    },
    click(number) {
      let that = this;
      this.current = number;
      this.locked = true;
      if (this.timer !== null) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(function () {
        that.locked = false;
      }, 3000);
    },
    normalInquire() {
      let inquireWord;
      if (this.inquireWord === "") {
        inquireWord = "null";
      } else {
        inquireWord = this.inquireWord;
      }
      this.$router.push({name: "Merchants", params: {keywords: inquireWord}});
    }
  }
};
</script>

<style scoped>

.integrated_module {
  width: 100%;
}

.tipWord {
  padding-top: 8px;
  padding-right: 5px;
  transition-duration: 1s;
  font-size: 18px;
  background: linear-gradient(to right, rgba(77, 255, 255, 0.4), white);
  cursor: pointer;
  color: rgb(255, 0, 255);
}

.tipWord:hover {
  padding-top: 8px;
  padding-right: 5px;
  font-size: 18px;
  cursor: pointer;
  color: rgb(255, 125, 255);
  transition-duration: 1s;
  background-color: white;
}

.unchosen {
  background: linear-gradient(to right, rgba(77, 255, 255, 0.4), rgba(77, 255, 255, 0.1));
  transition-duration: 1s;
  font-size: 18px;
  padding-top: 8px;
  padding-right: 5px;
  cursor: pointer;
  color: rgb(0, 0, 0);
}
</style>